<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MS Office 社区讨论 - 计算机二级考试平台</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .navbar {
            background: #2A3F6B;
            padding: 1rem;
            color: white;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        /* 基础重置和变量定义 */
        :root {
            --primary-color: #2A3F6B;
            --secondary-color: #4A90E2;
            --accent-color: #FF6B6B;
            --success-color: #4CAF50;
            --text-dark: #333;
            --text-medium: #666;
            --text-light: #999;
            --bg-light: #f8f9fa;
            --border-radius: 8px;
            --shadow: 0 3px 6px rgba(0,0,0,0.1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Noto Sans SC', 'Poppins', sans-serif;
        }

        /* 社区讨论容器 */
        .community-container {
            max-width: 1200px;
            margin: 2rem auto;
            padding: 0 1rem;
        }

        /* 头部区域 */
        .community-header {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
        }

        .community-title {
            color: var(--primary-color);
            font-size: 2rem;
            font-weight: 600;
        }

        /* 操作区域 */
        .community-actions {
            display: flex;
            gap: 1rem;
            align-items: center;
            width: 100%;
            max-width: 600px;
        }

        .search-form {
            flex: 1;
            position: relative;
        }

        .search-input {
            width: 100%;
            padding: 0.8rem 2.5rem 0.8rem 1rem;
            border: 1px solid #ddd;
            border-radius: var(--border-radius);
            transition: border-color 0.3s;
        }

        .search-input:focus {
            outline: none;
            border-color: var(--secondary-color);
            box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
        }

        .search-button {
            position: absolute;
            right: 1rem;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: var(--text-medium);
            cursor: pointer;
        }

        .new-post-button {
            background: var(--success-color);
            color: white;
            padding: 0.8rem 1.5rem;
            border: none;
            border-radius: var(--border-radius);
            cursor: pointer;
            transition: background 0.3s;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .new-post-button:hover {
            background: #45a049;
        }

        /* 分类导航 */
        .category-nav {
            display: flex;
            gap: 0.75rem;
            margin-bottom: 2rem;
            flex-wrap: wrap;
        }

        .category-button {
            padding: 0.5rem 1.25rem;
            border: 1px solid #ddd;
            border-radius: 1.25rem;
            background: white;
            cursor: pointer;
            transition: all 0.3s;
            color: var(--text-medium);
        }

        .category-button.active,
        .category-button:hover {
            background: var(--secondary-color);
            color: white;
            border-color: var(--secondary-color);
        }

        /* 帖子列表 */
        .post-list {
            display: grid;
            gap: 1.5rem;
        }

        /* 帖子卡片 */
        .post-card {
            background: white;
            border-radius: var(--border-radius);
            padding: 1.5rem;
            box-shadow: var(--shadow);
            transition: transform 0.3s;
            position: relative;
        }

        .post-card:hover {
            transform: translateY(-3px);
        }

        .post-card.sticky {
            border-left: 4px solid var(--accent-color);
            background: linear-gradient(to right, #fff9f9, white);
        }

        /* 元信息区域 */
        .post-meta {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 1rem;
        }

        .author-info {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .author-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }

        .author-details {
            display: flex;
            flex-direction: column;
        }

        .author-name {
            font-weight: 500;
            color: var(--text-dark);
        }

        .post-time {
            color: var(--text-light);
            font-size: 0.875rem;
        }

        .post-tag {
            padding: 0.25rem 0.75rem;
            border-radius: 4px;
            font-size: 0.875rem;
            font-weight: 500;
        }

        .tag-official {
            background: var(--accent-color);
            color: white;
        }

        .tag-excel {
            background: var(--success-color);
            color: white;
        }

        /* 帖子内容 */
        .post-content {
            margin-bottom: 1rem;
        }

        .post-title {
            color: var(--primary-color);
            margin-bottom: 0.5rem;
            font-size: 1.25rem;
        }

        .post-excerpt {
            color: var(--text-medium);
            line-height: 1.6;
            display: -webkit-box;
            /* -webkit-line-clamp: 2; */
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* 互动统计 */
        .post-stats {
            display: flex;
            gap: 1.5rem;
            color: var(--text-light);
            font-size: 0.875rem;
        }

        .stat-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            cursor: pointer;
            transition: color 0.3s;
        }

        .stat-item:hover {
            color: var(--secondary-color);
        }

        /* 加载更多 */
        .load-more {
            text-align: center;
            margin: 2rem 0;
        }

        .load-button {
            padding: 0.8rem 2rem;
            background: var(--secondary-color);
            color: white;
            border: none;
            border-radius: var(--border-radius);
            cursor: pointer;
            transition: background 0.3s;
        }

        .load-button:hover {
            background: #3a7bd5;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .community-header {
                flex-direction: column;
            }

            .community-actions {
                flex-direction: column;
            }

            .new-post-button {
                width: 100%;
                justify-content: center;
            }

            .post-meta {
                flex-direction: column;
                gap: 1rem;
            }
        }
    </style>
</head>
<body>
  <nav class="navbar">
    <h1>计算机二级(MS Office)考试网</h1>
</nav>
    <section class="community-container" aria-label="社区讨论区">
        <header class="community-header">
            <h1 class="community-title">💬 MS Office 交流社区</h1>
            <div class="community-actions">
                <form class="search-form" role="search">
                    <input type="text" 
                           class="search-input" 
                           placeholder="搜索帖子、问题或用户..."
                           aria-label="搜索社区内容">
                    <button type="submit" class="search-button" aria-label="搜索">
                        <i class="fas fa-search"></i>
                    </button>
                </form>
                <button class="new-post-button" aria-label="发表新帖子">
                    <i class="fas fa-plus"></i>
                    发新帖
                </button>
            </div>
        </header>

        <nav class="category-nav" aria-label="帖子分类">
            <button class="category-button active" data-category="all">全部</button>
            <button class="category-button" data-category="word">Word技巧</button>
            <button class="category-button" data-category="excel">Excel公式</button>
            <button class="category-button" data-category="ppt">PPT设计</button>
            <button class="category-button" data-category="qa">疑难解答</button>
        </nav>

        <div class="post-list" role="list">
            <!-- 动态内容将通过JavaScript加载 -->
        </div>

        <div class="load-more">
            <button class="load-button">加载更多帖子</button>
        </div>
    </section>

    <script>
        // 帖子数据模板
        const posts = [
            {
                id: 1,
                sticky: true,
                author: {
                    name: "考试小助手",
                    avatar: "./avatar_img/user_img1.png",
                    role: "官方"
                },
                title: "【必读】Word长文档排版十大常见错误解析",
                content: "深度解析样式应用、页眉页脚设置、目录生成等高频问题...",
                category: "word",
                stats: {
                    comments: 58,
                    likes: 126,
                    views: 892
                },
                timestamp: "2023-09-20T14:30:00"
            },
            {
                id: 2,
                author: {
                    name: "Office达人",
                    avatar: "./avatar_img/user_img2.png",
                    role: "金牌会员"
                },
                title: "VLOOKUP函数使用技巧大全（附常见报错解决方案）",
                content: "从基础用法到跨表查询，手把手教你玩转数据匹配...",
                category: "excel",
                stats: {
                    comments: 34,
                    likes: 89,
                    views: 457
                },
                timestamp: "2023-09-20T10:15:00"
            },
            {
                id: 3,
                author: {
                    name: "Office达人",
                    avatar: "./avatar_img/user_img3.png",
                    role: "金牌会员"
                },
                title: "VLOOKUP函数使用技巧大全（附常见报错解决方案）",
                content: "从基础用法到跨表查询，手把手教你玩转数据匹配...",
                category: "excel",
                stats: {
                    comments: 34,
                    likes: 89,
                    views: 457
                },
                timestamp: "2023-09-20T10:15:00"
            }
        ];

        // DOM元素
        const postList = document.querySelector('.post-list');
        const categoryButtons = document.querySelectorAll('.category-button');
        const loadButton = document.querySelector('.load-button');

        // 渲染帖子函数
        function renderPosts(filterCategory = 'all') {
            postList.innerHTML = posts
                .filter(post => filterCategory === 'all' || post.category === filterCategory)
                .map(post => `
                    <article class="post-card ${post.sticky ? 'sticky' : ''}" 
                             role="listitem"
                             data-post-id="${post.id}"
                             data-category="${post.category}">
                        <div class="post-meta">
                            <div class="author-info">
                                <img src="${post.author.avatar}" 
                                     alt="${post.author.name}的头像" 
                                     class="author-avatar">
                                <div class="author-details">
                                    <span class="author-name">${post.author.name}</span>
                                    <time class="post-time" 
                                          datetime="${post.timestamp}">
                                        ${new Date(post.timestamp).toLocaleString()}
                                    </time>
                                </div>
                            </div>
                            <span class="post-tag ${post.sticky ? 'tag-official' : `tag-${post.category}`}">
                                ${post.sticky ? '官方置顶' : post.category.toUpperCase()}
                            </span>
                        </div>
                        <div class="post-content">
                            <h2 class="post-title">${post.title}</h2>
                            <p class="post-excerpt">${post.content}</p>
                        </div>
                        <div class="post-stats">
                            <div class="stat-item">
                                <i class="fas fa-comment"></i>
                                <span>${post.stats.comments}</span>
                            </div>
                            <div class="stat-item like-button">
                                <i class="fas fa-heart"></i>
                                <span>${post.stats.likes}</span>
                            </div>
                            <div class="stat-item">
                                <i class="fas fa-eye"></i>
                                <span>${post.stats.views}</span>
                            </div>
                        </div>
                    </article>
                `).join('');
        }

        // 分类筛选
        categoryButtons.forEach(button => {
            button.addEventListener('click', () => {
                categoryButtons.forEach(btn => btn.classList.remove('active'));
                button.classList.add('active');
                const category = button.dataset.category;
                renderPosts(category);
            });
        });

        // 点赞功能
        document.addEventListener('click', (e) => {
            if (e.target.closest('.like-button')) {
                const heartIcon = e.target.closest('.like-button').querySelector('i');
                const countSpan = e.target.closest('.like-button').querySelector('span');
                
                heartIcon.classList.toggle('liked');
                if (heartIcon.classList.contains('liked')) {
                    heartIcon.style.color = 'var(--accent-color)';
                    countSpan.textContent = parseInt(countSpan.textContent) + 1;
                } else {
                    heartIcon.style.color = '';
                    countSpan.textContent = parseInt(countSpan.textContent) - 1;
                }
            }
        });

        // 加载更多
        let currentPage = 1;
        loadButton.addEventListener('click', async () => {
            try {
                loadButton.disabled = true;
                loadButton.textContent = '加载中...';
                
                // 模拟API调用
                const newPosts = await mockApiCall(currentPage);
                posts.push(...newPosts);
                renderPosts();
                currentPage++;
            } catch (error) {
                console.error('加载失败:', error);
            } finally {
                loadButton.disabled = false;
                loadButton.textContent = '加载更多帖子';
            }
        });

        // 模拟API
        async function mockApiCall(page) {
            return new Promise(resolve => {
                setTimeout(() => {
                    resolve([/* 新帖子数据 */]);
                }, 1000);
            });
        }

        // 初始化渲染
        renderPosts();
    </script>
</body>
</html>